<template>
  <div class="state">
    <div class="state-images" v-show="state === 1">
      <div class="state-images-wait"></div>
      <h1 class="state-images-state">请勿离开</h1>
      <h3 class="state-images-tips">{{message}}</h3>
    </div>
    <div class="state-images" v-show="state === 2">
      <div class="state-images-success"></div>
      <h3 class="state-images-tips">{{message}}</h3>
      <button class="state-back-btn" @click="goBackTo()">查看详情</button>
    </div>
    <div class="state-images" v-show="state === 3">
      <div class="state-images-fail"></div>
      <h3 class="state-images-tips">{{message}}</h3>
      <button class="state-back-btn" @click="goBackTo()">返回首页</button>
    </div>
  </div>
</template>
<script>
import { getPay } from "../../../api/rightsInterests.js";
export default {
  name: "oil-state",
  data() {
    return {
      state: 1,
      message: "您的微信正在提现中...",
      recordId: ''
    };
  },
  mounted() {
    const code = this.GetQueryString("code");
    let paramsList = JSON.parse(this.GetQueryString("openId"));
    const money = paramsList.money;
    const url = paramsList.session;
    sessionStorage.setItem('token', url);
    if (code) {
      const state = this.GetQueryString("state");
      const obj = { code: code, state: state, money: money };
      getPay(obj).then(res => {
          this.message = res.data.notice;
          this.state = 2;
          this.recordId = res.data.recordId;
        }).catch(err => {
            this.message = err.message;
            this.state = 3;

        });
    }
  },
  methods: {
    GetQueryString(name) {
      const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      const r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    goBackTo() {
      if (this.state === 3) {
        this.$router.replace({ name: "home" });
      } else if (this.state === 2) {
        this.$router.replace({ name: "wxdetail", query: {exchangeId: this.recordId, status: '兑换'} });

      }
    }
  }
};
</script>

<style lang="less" scoped>
.state {
  background: #fafafa;
  width: 100%;
  height: 100%;
  position: fixed;
  .state-images {
    width: 100%;
    text-align: center;
    margin-top: 80px;
    .state-images-wait{
      width: auto;
      min-height: 210px;
      margin-bottom: 30px;
      background-image: url(../../../assets/img/wait.jpg);
      background-size: auto auto;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .state-images-success{
      width: auto;
      min-height: 210px;
      margin-bottom: 30px;
      background-image: url(../../../assets/img/success.jpg);
      background-size: auto auto;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .state-images-fail{
      width: auto;
      min-height: 210px;
      margin-bottom: 30px;
      background-image: url(../../../assets/img/fail.jpg);
      background-size: auto auto;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .state-images-img{
      width: 86px;
      margin-bottom: 30px;
    }
    .state-images-state {
      width: 100%;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 100;
      text-align: center;
      color: rgba(73, 183, 224, 1);
      opacity: 1;
      margin-bottom: 20px;
    }
    .state-images-tips {
      font-size: 16px;
      font-weight: 500;
      font-family: PingFang SC;
      margin-bottom: 20px;
      width: calc( 100% - 84px);
      text-align: center;
      padding:5px 42px;
    }
    .state-back-btn {
      width: 120px;
      height: 36px;
      font-size: 16px;
      border-radius: 8px;
      background: rgba(73, 183, 224, 1);
      border: 1px solid rgba(73, 183, 224, 1);
      color: #ffffff;
      margin-top: 30px;
    }
  }
}
</style>
